<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="../../libs/mui.min.css" rel="stylesheet"/>
    <link href="../../css/main.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../css/mine-loan.css"/>
</head>

<body>
<div class="head">
    <img id="back" src="../../images/all-left.png" alt="">
    <p>我的贷款</p>
</div>

<div class="title">
    <div class="active"><span>未接单</span></div>
    <div><span>已接单</span></div>
    <div><span>审批中</span></div>
    <div><span>已通过</span></div>
    <div><span>未通过</span></div>
</div>

<div class="content">

    <div class="content-type-fi" id="content-type-fi">
        <!--<div class="content-f">
            <div class="content-f-le">
                <p>申请金额</p>
                <p>¥10000</p>
            </div>
            <div class="content-f-ri">
                <p>贷款人姓名：<span>张三</span></p>
                <p>贷款的类型：<span>人寿保单贷</span></p>
                <p>还款的期限：<span>12期</span></p>
                <p>申请的银行：<span>工商银行</span></p>
            </div>
        </div>-->
    </div>

    <div class="content-type-se" id="content-type-se" style="display: none;"></div>
    <div class="content-type-th" id="content-type-th" style="display: none;"></div>
    <div class="content-type-fo" id="content-type-fo" style="display: none;"></div>
    <div class="content-type-five" id="content-type-five" style="display: none;"></div>
    <p class="more" style="margin-top: 5px;">点击加载更多</p>
</div>

<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../libs/mui.min.js"></script>
<script src="../../js/url.js"></script>
<script>
    $('#back').on('tap', function () {
        mui.back();
    })
    //点击切换改变让是和请求当前状态的数据
    $('.title>div').on('tap', function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.content>div').eq($(this).index()).show(0).siblings().hide(0); //tabs切换
        loanArr[$(this).index()].getAjax()
    })
    var Loan = function (state, page) {
        this.state = state;
        this.page = page;
    };
    Loan.prototype.getAjax = function () {
        //请求贷款列表
        this.page++;
        var self = this;
        $.ajax({
            url: ur + 'rest/loanController/request-list',
            type: "get",
            dataType: 'json',
            headers: {
                "X-Token": localStorage.token
            },
            data: {
                isUser: true,
                loanCodes: 'xyd,2y,aj,fcdy,qcdy,xed',
                state: self.state,
                page: self.page,
            },
            success: function (data) {
                var list = data.data.list;
                var n = list.length;
                var totalPage = Math.ceil(data.data.total / 10)
                //当前货款数
                var loanL = $('.content').children().eq(self.state).find('.content-f').length
                if (data.meta.code === 'S002') {
                    if (data.data.total != loanL) {
                        var loanCode;
                        for (var i = 0; i < n; i++) {
                            var message = JSON.parse(HTMLDecode(list[i].params));
                            //匹配贷款类型
                            switch (list[i].loanCode) {
                                case "xyd":
                                    loanCode = '信用贷';
                                    break;
                                case '2y':
                                    loanCode = '二押贷';
                                    break;
                                case 'aj':
                                    loanCode = '按揭垫资';
                                    break;
                                case 'fcdy':
                                    loanCode = '房产抵押';
                                    break;
                                case 'qcdy':
                                    loanCode = '汽车抵押';
                                    break;
                                case 'xed':
                                    loanCode = '小额贷';
                                    break;
                            }
                            var itemL = $('<div class="content-f">' +
                                '<div class="content-f-le">' +
                                '<p>申请金额</p>' +
                                '<p>' + message.price + '万元</p>' +
                                '</div>' +
                                '<div class="content-f-ri">' +
                                '<p>贷款人姓名：<span>' + message.name +
                                '</span></p>' +
                                '<p>贷款的类型：<span>' + loanCode + '</span></p>' +
                                (message.date !== "undefined" ? ('<p>还款的期限：<span>' + message.date + '</span></p>') : '<p>还款的期限：</p>') +
                                '<p>申请的类型：<span>' + message.freeService + '</span></p>' +
                                '</div>' +
                                '</div>')
                            $('.content').children().eq(self.state).append(itemL);
                        }
                    }

                    if (self.page === 1 && self.page === totalPage) {
                        $('.more').text('');
                        return false;
                    } else if (self.page < totalPage) {
                        $('.more').text('点击加载更多')
                        $('.more').on('tap', function () {
                            self.getAjax();
                        })
                    } else {
                        $('.more').text('已无更多！');
                    }
                } else {
                    mui.toast(data.meta.message);
                }
            }
        })
    }

    var loanArr = {
        0: new Loan(0, 0),
        1: new Loan(1, 0),
        2: new Loan(2, 0),
        3: new Loan(3, 0),
        4: new Loan(4, 0)
    }
    loanArr[0].getAjax();//默认出现首个
</script>
</body>

</html>